<template>
    <view class="audit">

        <nut-form :rules="alldatasRules" :model-value="alldatas" class="billNo" ref="ruleForm">
            <nut-form-item label="承运单号" required prop="billNo">
                <nut-input :border="false" v-model="alldatas.billNo" placeholder="请输入文本">
                    <template v-slot:right>
                        <Scan />
                    </template>
                </nut-input>
            </nut-form-item>
            <nut-form-item label="目的地" required prop="destination">
                <nut-input readonly :border="false" v-model="alldatas.destination" placeholder="请输入目的地">
                    <template #right>
                        <RectRight @click="setDestination" />
                    </template>
                </nut-input>
            </nut-form-item>
            <nut-form-item label="库位" required prop="warehouse">
                <nut-input readonly :border="false" v-model="alldatas.warehouse" placeholder="请输入目的地">
                    <template #right>
                        <RectRight @click="setWarehouse" />
                    </template>
                </nut-input>

            </nut-form-item>


            <!-- 发货 收货 地址部分 -->
            <view class="center">
                <div class="flex">

                    <view class="site-left flex flex-direction" style="margin-top:20rpx">
                        <view>
                            <image src="../../assets/images/index/我要发货/shouye_icon_fahuo.png"
                                style="width: 42px;height: 42px;" />
                        </view>
                        <view class="border-dash"></view>
                        <view class="margin-t80">
                            <image src="../../assets/images/index/我要发货/shouye_icon_shouhuo.png"
                                style="width: 42px;height: 42px;" />
                        </view>
                    </view>
                    <view class="site-right width100">
                        <view class="flex align-center sh-solid justify-between" @click="goAddressBook(1)">
                            <view>
                                <view class="sh-text-color sh-font-ls sh-line-height48 sh-bold">
                                    {{ usersInfo.sendInfo.name ? usersInfo.sendInfo.name : '请输入发货信息' }} &nbsp;{{
                                        usersInfo.sendInfo.phone }}

                                </view>
                                <view class="sh-write-color sh-font-sm addressIndex">


                                    {{ usersInfo.sendInfo.address }}
                                </view>
                            </view>
                            <view class="flex flex-direction align-center">
                                <RectRight />
                                <!-- <image src="../../assets/images/index/我要发货/icon_dizhibu.png"
                                style=" width: 28px;height: 28px; " />
                            <text class="sh-gary-color sh-font-size">地址簿</text> -->
                            </view>
                        </view>
                        <view class="flex align-center justify-between margin-t10" @click="goAddressBook(2)">
                            <view>
                                <view class="sh-text-color sh-font-ls sh-line-height48 sh-bold">
                                    {{ usersInfo.getInfo.name ? usersInfo.getInfo.name : '请输入发货信息' }} &nbsp;{{
                                        usersInfo.getInfo.phone }}
                                </view>
                                <view class="sh-write-color sh-font-sm">
                                    {{ usersInfo.getInfo.address }}
                                </view>
                            </view>
                            <view class="flex flex-direction align-center ">

                                <RectRight />
                                <!-- <image src="../../assets/images/index/我要发货/icon_dizhibu.png"
                                style="width: 28px;height: 28px; " />
                            <text class="sh-gary-color sh-font-size">地址簿</text> -->
                            </view>
                        </view>
                    </view>
                </div>

                <view class="bottoms">
                    <nut-form-item label="身份证号" required prop="shipperId">
                        <nut-input :border="false" v-model="alldatas.shipperId" placeholder="请输入文本">

                        </nut-input>

                    </nut-form-item>
                </view>
            </view>

            <!-- tab栏部分 -->
            <view class="tabcontainer">
                <nut-tabs v-model="isactive" ref="tabrefs">
                    <nut-tab-pane title="基本信息">
                        <view class="content">
                            <!-- <view class="box1">
                                <span>货物明细</span>
                            </view> -->
                            <nut-form-item label="货物信息" required>
                                <div style="text-align: right;">
                                    <nut-button @click="addGoods" size="mini" type="info">添加货物</nut-button>

                                </div>
                            </nut-form-item>

                            <view class="box3 font_black" v-for="(item, index) in alldatas.goodsInfo" :key="index">
                                <span class="goods_info">{{ filtergoods(item) }} </span>
                            </view>

                            <view class="box1">
                                <span>付款方式</span>
                                <span class="font_black">
                                    <template v-if="alldatas.clearingForm == 1">签单</template>
                                    <template v-if="alldatas.clearingForm == 2">现付</template>
                                    <template v-if="alldatas.clearingForm == 3">提付</template>
                                </span>
                            </view>

                            <view class="box1">
                                <span>提货方式</span>
                                <span class="font_black" @click="istihuoshow = true">
                                    <!-- 配送;全时段;送商标;非标件,电梯 -->
                                    {{ pickUpType(alldatas.pickUpMode) }}
                                    <RectRight style="vertical-align: middle;" />
                                </span>
                            </view>
                        </view>
                        <view class="empty"></view>
                        <view class="content-center">
                            <view class="box1">
                                <view class="left">起运地</view>
                                <view class="right font_blue" @click="getDetail('1')">

                                    <span>
                                        <Locationg3 color="#0966FF" class="middle" />{{ alldatas.startBranchName }}
                                    </span>
                                </view>
                            </view>

                            <view class="box1">
                                <view class="left ">目的地</view>
                                <view class="right font_blue" @click="getDetail('2')">

                                    <span>
                                        <Locationg3 color="#0966FF" class="middle" />{{ alldatas.destinationBranchName }}
                                    </span>
                                </view>
                            </view>

                            <view class="box1">
                                <view class="left">是否加急</view>
                                <span class="font_black">{{ isurgent ? '是' : '否' }}</span>
                            </view>
                        </view>
                        <view class="empty"></view>
                        <view class="content_bottom">
                            <span>订单号</span>
                            <span class="font_black">{{ alldatas.orderCode }}</span>
                        </view>
                    </nut-tab-pane>
                    <nut-tab-pane title="其他信息">
                        <view class="content2">
                            <view class="box1">
                                <view class="left">承运类型</view>
                                <view class="right font_black">
                                    <span v-if="alldatas.sendType == '7'">隔日达</span>
                                    <span v-else-if="alldatas.sendType == '2'">普件</span>
                                    <span v-else-if="alldatas.sendType == '1'">快件</span>
                                    <span v-else-if="alldatas.sendType == '3'">整车</span>
                                    <span v-else-if="alldatas.sendType == '4'">560经济型</span>
                                    <span v-else-if="alldatas.sendType == '5'">560商务型</span>
                                    <span v-else-if="alldatas.sendType == '6'">次日达</span>
                                </view>
                            </view>

                            <view class="box1">
                                <view class="left">装车类型</view>
                                <view class="right font_black">
                                    <span v-if="alldatas.loadType == 1">内配</span>
                                    <span v-if="alldatas.loadType == 2">外装</span>
                                </view>
                            </view>
                        </view>
                        <view class="empty"></view>
                        <view class="content2 content22">
                            <view class="box1">
                                <view class="left">保价</view>
                                <view class="right font_black">
                                    <span v-if="alldatas.insuredMoney">{{ alldatas.insuredMoney }} 元</span>
                                    <span v-else>不保价</span>
                                </view>
                            </view>

                            <view class="box1">
                                <view class="left">代收货款</view>
                                <view class="right font_black">
                                    <template v-if="alldatas.collectionMoney == 0 || !alldatas.collectionMoney
                                        ">
                                        不代收
                                    </template>
                                    <template v-if="alldatas.collectionMoney == 1">
                                        <template>
                                            <span v-show="alldatas.returnCycle == 1">即日退 ;</span>
                                            <span v-show="alldatas.returnCycle == 2">三日退 ;</span>
                                            <span v-show="alldatas.returnCycle == 3">月结 ;</span>
                                        </template>
                                        <template>
                                            <span v-show="alldatas.returnType == 1">会员卡返还</span>
                                            <span v-show="alldatas.returnType == 2">银行卡返还</span>
                                            <span v-show="alldatas.returnType == 3">微信返还</span>
                                            <span v-show="alldatas.returnType == 4">支付宝返还</span>
                                            <span v-show="alldatas.returnType == 5">现金返还</span>
                                        </template>
                                    </template>
                                </view>
                            </view>

                            <view class="box1">
                                <view class="left">单据服务</view>
                                <view class="right font_black">
                                    <span v-if="alldatas.billServer == '1;2'">附单据、材料;承运单</span>
                                    <span v-if="alldatas.billServer == '2;3'">承运单;附厂单、资料</span>
                                    <span v-if="alldatas.billServer == '2;'">承运单</span>
                                    <span v-if="alldatas.billServer == '1;'">附单据、材料</span>
                                    <span v-if="alldatas.billServer == '3;'">附厂单、资料</span>
                                </view>
                            </view>

                            <view class="box1">
                                <view class="left">外转目的地</view>
                                <view class="right font_black">
                                    <span>{{ alldatas.assistAdd }}</span>
                                </view>
                            </view>
                        </view>
                        <view class="empty"></view>
                        <view class="content2 content222">
                            <view class="box1">
                                <view class="left">库位</view>
                                <view class="right font_black">
                                    <span>{{ alldatas.location }}</span>
                                </view>
                            </view>
                        </view>
                    </nut-tab-pane>
                </nut-tabs>
            </view>
        </nut-form>
    </view>

    <view class="container_send_bottom">
        <strong>合计:￥</strong><span>{{ allPay.toFixed(2) }}</span> <a @click="isMyShow = true">明细
            <RectDown />
        </a>
        <!-- <nut-button type="info" @click="audit">审核订单</nut-button> -->
        <nut-button type="info" @click="isMyShow2 = true">审核订单</nut-button>
    </view>
    <!-- 地址抽屉 -->
    <send-form :userType="userType" @set="set" :show="showSendForm" type="1" operateType="add"
        @close="closeSendForm"></send-form>
    <!-- 底部价格合计 -->
    <CostInfoModal :isMyShow="isMyShow" @closeCostModal="closeCostModal" />
    <!-- 提货方式详情 -->
    <GetGoodsModal @closeGoodsModal="closeGoodsModal" :isShow="istihuoshow" />
    <!-- 服务条款 -->
    <TermsOfService :isMyShow2="isMyShow2" @closeCostModal2="closeCostModal2" @close="close" />
    <warehousePanel @determine="determine" :showRound="showRound"></warehousePanel>
</template>
      
<script lang="ts" setup>

import useOrderStore from '@/store/order';
import { GoodsListType } from '@/type/index.ts';
import { Add, Locationg3, People, RectDown, RectRight } from '@nutui/icons-vue-taro';
import CostInfoModal from '@/pages3/sendSure/costInfoModal.vue'
import GetGoodsModal from '@/pages3/sendSure/getGoodsModal.vue'
import TermsOfService from '@/pages3/sendSure/termsOfService.vue'
import { onMounted, ref, reactive } from 'vue';
import { getAudit, getCompanyDetail } from '@/@api/order';
import Taro from '@tarojs/taro';
import Scan from '@/components/Scan/index.vue';
import warehousePanel from './components/warehousePanel.vue'
import sendForm from "@/components/sendForm/index.vue";


const orderStore = useOrderStore()
const isMyShow = ref(false)
const isMyShow2 = ref(false)
const alldatas = orderStore.orderInfo

console.log(alldatas, 'alldatas');

const istihuoshow = ref(false)

onMounted(() => {
    reqEndCompanyDetail()
    console.log(JSON.parse(JSON.stringify(alldatas)), 'alldatas');

    Taro.authorize({
        scope: 'scope.userLocation',
        success() {
            console.log('获取权限成功')

        },
        fail() {
            console.log('获取权限失败')
        }
    })
})
const setDestination = () => {
    wx.chooseLocation({


        success: (res) => {
            console.log(res);

        }
    })
}
const showRound = ref<{
    state: boolean
}>({
    state: false
})
const setWarehouse = () => {
    console.log('setWarehouse');
    showRound.value.state = true


}
// 身份证号隐藏
if (alldatas.shipperId) {
    let str1 = alldatas.shipperId.slice(0, 6);
    let str2 = alldatas.shipperId.slice(14);
    alldatas.shipperId = str1 + "********" + str2;
}
// tab栏
const isactive = ref(0)
const isurgent = ref('')
const alldatasRules = {
    billNo: [
        {
            require: true,
            message: '请填写承运单号'
        },
    ],
    destination: [
        {
            require: true,
            message: '请填写目的地'
        }
    ],
    warehouse: [
        {
            require: true,
            message: '请填写库位'
        }
    ]
}

// 合计费用
const allPay = ref(0)

function getAllMoney() {
    alldatas.costList.forEach(item => {
        allPay.value = allPay.value + item.actualMoney
    })
}
getAllMoney()

// 跳网点详情页
async function getDetail(val: string) {
    let str = ''
    if (val === '1') {
        str = alldatas.startBranch
    } else {
        str = alldatas.destinationBranch
    }

    const res = await getCompanyDetail({
        customerCode: alldatas.customerCode,
        branchCompanyNo: str
    });
    orderStore.companyInfo = res.data.data

    positionAddress([+orderStore.endCompanyInfo.localX, +orderStore.endCompanyInfo.localY])
}

function filtergoods(val: GoodsListType) {
    return (
        val.goodsName +
        " " +
        val.goodsType +
        "," +
        val.weigh +
        "kg," +
        val.goodsNumber +
        "件," +
        val.goodsVolume +
        "m³," +
        val.packing
    );
}

function pickUpType(val: string) {
    if (val == '1') {
        return '自提'
    } else if (val == '2') {
        return '送货'
    } else {
        return '直送'
    }
}

// 结束网点信息
async function reqEndCompanyDetail() {
    const res = await getCompanyDetail({
        customerCode: alldatas.customerCode,
        branchCompanyNo: alldatas.destinationBranch,
    });
    orderStore.endCompanyInfo = res.data.data
}

// 查看网点位置
function positionAddress(pos: number[]) {
    Taro.openLocation({
        latitude: pos[0],
        longitude: pos[1]
    })
}


// 关闭费用窗口
function closeCostModal() {
    isMyShow.value = false
}
// 关闭网点窗口
function closeGoodsModal() {
    istihuoshow.value = false
}

// 审核
function close() {
    isMyShow2.value = false
}
async function closeCostModal2() {
    isMyShow2.value = false
    const { data } = await getAudit({
        ssoId: alldatas.ssoId,
        isExamine: 2,
    });
    if (data.code == 200) {
        Taro.showToast({
            title: '审核成功',
            icon: 'success'
        })

        setTimeout(() => {
            Taro.navigateBack()
        }, 1000);
    }
}

// 跳转到地址薄
function gotoAddressBook(msg: string) {
    Taro.navigateTo({
        url: `../AddressBook/index?msg=${msg}`
    });

}

// 选择库位
const determine = (t) => {
    console.log(t, 432);
    alldatas.warehouse = t.warehouseName
}

const showSendForm = ref(false)
let userType = ref(1)
const goAddressBook = (t) => {
    userType.value = t
    showSendForm.value = true
}
const closeSendForm = () => {
    showSendForm.value = false
}
const usersInfo = reactive({
    sendInfo: {
        name: '',
        phone: '',
        address: ''
    },
    getInfo: {
        name: '',
        phone: '',
        address: ''
    }
})
const set = (f) => {
    console.log(f);

    if (userType.value == 1) {
        usersInfo.sendInfo = {
            ...f
        }
    } else if (userType.value == 2) {
        usersInfo.getInfo = {
            ...f
        }
    }
    showSendForm.value = false
    console.log(usersInfo, 527);

}
const addGoods = () => {
    Taro.navigateTo({
        url: '/pages3/audit/goods'
    })
}
</script>

<style lang="scss">
.audit {

    // linear-gradient(270deg, rgba(9,102,255,0.02) 0%, rgba(9,102,255,0.90) 100%);
    // var(--nut-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%));
    --nut-tabs-horizontal-tab-line-color: linear-gradient(270deg, rgba(9, 102, 255, 0.02) 0%, rgba(9, 102, 255, 0.90) 100%);
    background-color: #EBECF0;
    height: calc(100vh - 128rpx);
    overflow: auto;
    box-sizing: border-box;

    .billNo {
        background-color: #fff;

        .nut-input {
            color: #999999;
        }
    }

    .center {
        margin-top: 16rpx;
        width: 700rpx;
        // height: 400rpx;
        box-sizing: border-box;
        padding: 20rpx 27rpx 0 0;
        background-color: #fff;
        border-radius: 10rpx;

        .top {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-top: 40rpx;

            image {
                width: 60rpx;
                height: 60rpx;
                margin-top: -10rpx;
            }

            .centers {
                width: 572rpx;
                border-bottom: 1px solid #ccc;
                padding-bottom: 32rpx;
                display: flex;
                justify-content: space-between;

                .right {
                    font-size: 23rpx;
                    align-self: center;
                    color: #bcbec5;
                }
            }

            .text {
                // height: 32rpx;
                font-size: 20rpx !important;
            }

            p {
                display: flex;
                font-size: 48rpx;
                color: #666666;


                span {
                    margin-right: 20rpx;
                    font-size: 28rpx;
                    font-weight: 700;
                    line-height: 40rpx;
                    color: #252525;
                }

                font-size: 24rpx;
            }
        }

        .bottoms {
            // display: flex;
            // width: 572rpx;
            // margin-top: 32rpx;
            font-size: 28rpx;

        }


    }

    .tabcontainer {
        height: 824rpx;
        margin-bottom: 98rpx;

        .nut-tab-pane {
            padding: 0;
        }

        .nut-tab-pane {
            padding: 24rpx;
        }

        color: #666666;
        font-size: 28rpx;

        .box1 {
            display: flex;
            justify-content: space-between;
            padding: 24rpx;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);

            .middle {
                vertical-align: middle;
            }
        }

        .box3 {
            width: 606rpx;
            background-color: #F8F9FA;
            margin-left: 24rpx;
            padding: 10rpx 0;
        }

        .content_bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 16rpx;
            height: 112rpx;
            line-height: 112rpx;
        }
    }

    .font_black {
        color: #000;
        font-weight: 700;
    }

    .font_blue {
        color: #0966FF;
        font-weight: 700;
    }
}

.site-left {
    position: relative;

    .border-dash {
        position: absolute;
        top: 60px;
        left: 40px;
        height: 100px;
        border-left: 2px dashed #ccc;
    }
}

.container_send_bottom {
    width: 100vw;
    height: 128rpx;
    display: flex;
    align-items: flex-end;
    font-size: 24rpx;
    padding: 20rpx 24rpx;
    color: #999999;
    box-sizing: border-box;

    strong {
        width: 100rpx;
    }

    span {
        font-size: 60rpx;
        color: #FA5151;
    }

    a {
        display: flex;
        width: 120rpx;
        color: #0966FF;
        font-size: 24rpx;
        margin-left: 32rpx;
    }

    .nut-button {
        margin-left: 30rpx;
    }
}
</style>